<html>
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
<body style="text-align: center">
    <div>
        <canvas id="drawingCanvas" width="720" height="1080" style="background-color: #000000; "></canvas>
    </div>
	<script src="js/howler.core.min.js">
	<script src="js/jszip-utils.min.js"></script>
     <script src="js/svga.min.js"></script>
    <script>
        var parser = new SVGA.Parser()
        var player = new SVGA.Player()
        parser.load("samples/heartbeat.svga", function (videoItem) {
            player.setVideoItem(videoItem);
            player.startAnimation()
        })
        const requestFrame = () => {
            requestAnimationFrame(() => {
                const ctx = document.getElementById('drawingCanvas').getContext('2d');
                ctx.clearRect(0, 0, 500, 1000);
                ctx.fillStyle = "#e2e2e2"
                ctx.fillRect(0, 0, 500, 1000);
                player.drawOnContext(ctx, 100, 100, 250, 250);
                requestFrame()
            })
        }

        requestFrame();

    </script>
</body>

</html>